<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>Elmer I Fast build Admin dashboard for any platform</title>
    <meta name="description" content="Elmer is a Dashboard & Admin Site Responsive Template by hencework."/>
    <meta name="keywords"
          content="admin, admin dashboard, admin template, cms, crm, Elmer Admin, Elmeradmin, premium admin templates, responsive admin, sass, panel, software, ui, dwh, web app, application"/>
    <meta name="author" content="hencework"/>

    <!-- Bootstrap Wysihtml5 css -->
    <link rel="stylesheet" href="vendors/bower_components/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.css"/>
    <!-- Data table CSS -->
    <link href="vendors/bower_components/datatables/media/css/jquery.dataTables.min.css" rel="stylesheet"
          type="text/css"/>
    <!-- Custom CSS -->
    <link href="dist/css/style.css" rel="stylesheet" type="text/css">

</head>

<body>
<!--/Preloader-->
<div class="wrapper   pimary-color-blue" style="min-height: 650px">
    <!-- Main Content -->
    <!-- Row -->
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default card-view pa-0">
                <div class="panel-wrapper collapse in">
                    <div class="panel-body pa-0">
                        <div class="contact-list">
                            <div class="row" >
                                <aside class="col-xs-1 col-md-1">
                                </aside>

                                <aside class="col-lg-10 col-md-8 pl-0">
                                    <div class="panel pa-0">
                                        <div class="panel-wrapper collapse in">
                                            <div class="panel-body  pa-0">
                                                <div class="table-responsive mb-30">
                                                    <table id="datable_1" class="table  display table-hover mb-30"
                                                           data-page-size="10">
                                                        <thead>
                                                        <tr>
                                                            <th>编号</th>
                                                            <th>姓名</th>
                                                            <th>Email</th>
                                                            <th>电话</th>
                                                            <th>创建时间</th>
                                                            <th>修改时间</th>
                                                            <th>操作</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>

                                                        </tbody>
                                                        <aside class="col-lg-2 col-md-4 pr-0">
                                                            <div class="mt-20 mb-20 ml-15 mr-15">
                                                                <a href="#myModal" data-toggle="modal" title="Compose"
                                                                   class="btn btn-success btn-block">
                                                                    添加用户
                                                                </a>
                                                                <!-- Modal -->
                                                                <div aria-hidden="true" role="dialog" tabindex="-1" id="myModal"
                                                                     class="modal fade" style="display: none;">
                                                                    <div class="modal-dialog">
                                                                        <div class="modal-content">
                                                                            <div class="modal-header">
                                                                                <button type="button" class="close" data-dismiss="modal"
                                                                                        aria-hidden="true">×
                                                                                </button>
                                                                                <h4 class="modal-title" >添加用户</h4>
                                                                            </div>
                                                                            <div class="modal-body">
                                                                                <form class="form-horizontal form-material" >
                                                                                    <div class="form-group">
                                                                                        <div class="col-md-12 mb-20">
                                                                                            <input type="text" class="form-control"
                                                                                                   placeholder="请输入用户名" id="addName" name="username">
                                                                                        </div>
                                                                                        <div class="col-md-12 mb-20">
                                                                                            <input type="password" class="form-control"
                                                                                                   placeholder="请输入密码" id="addPwd" name="password">
                                                                                        </div>
                                                                                        <div class="col-md-12 mb-20">
                                                                                            <input type="password" class="form-control"
                                                                                                   placeholder="请确认密码" id="addPwd2" >
                                                                                        </div>
                                                                                        <div class="col-md-12 mb-20">
                                                                                            <input type="text" class="form-control"
                                                                                                   placeholder="请填写邮箱" id="addEmail" name="email">
                                                                                        </div>
                                                                                        <div class="col-md-12 mb-20">
                                                                                            <input type="text" class="form-control"
                                                                                                   placeholder="请填写手机号码" id="addPhone" name="phone">
                                                                                        </div>
                                                                                        <div class="form-group">
                                                                                            <span id="errMsg"></span>
                                                                                        </div>

                                                                                    </div>
                                                                                </form>
                                                                            </div>
                                                                            <div class="modal-footer">
                                                                                <button type="button" class="btn btn-info waves-effect"
                                                                                        data-dismiss="modal" onclick="save()">保存
                                                                                </button>
                                                                                <button type="button" class="btn btn-default waves-effect"
                                                                                        data-dismiss="modal" >取消
                                                                                </button>
                                                                            </div>
                                                                        </div>
                                                                        <!-- /.modal-content -->
                                                                    </div>
                                                                    <!-- /.modal-dialog -->
                                                                </div>
                                                                <!-- /.modal -->
                                                                <div aria-hidden="true" role="dialog" tabindex="-1" id="myUpdateModal"
                                                                     class="modal fade" style="display: none;">
                                                                    <div class="modal-dialog">
                                                                        <div class="modal-content">
                                                                            <div class="modal-header">
                                                                                <button type="button" class="close" data-dismiss="modal"
                                                                                        aria-hidden="true">×
                                                                                </button>
                                                                                <h4 class="modal-title" >修改用户</h4>
                                                                            </div>
                                                                            <div class="modal-body">
                                                                                <form class="form-horizontal form-material" >
                                                                                    <div class="form-group">
                                                                                        <div class="col-md-12 mb-20">
                                                                                            <input type="text" class="form-control"
                                                                                                   placeholder="用户名" id="updateName" name="username">
                                                                                        </div>
                                                                                        <div class="col-md-12 mb-20">
                                                                                            <input type="text" class="form-control"
                                                                                                   placeholder="邮箱" id="updateEmail" name="email">
                                                                                        </div>
                                                                                        <div class="col-md-12 mb-20">
                                                                                            <input type="text" class="form-control"
                                                                                                   placeholder="电话" id="updatePhone" name="phone">
                                                                                        </div>
                                                                                        <div class="form-group">
                                                                                            <span id="updateErrMsg"></span>
                                                                                        </div>

                                                                                    </div>
                                                                                </form>
                                                                            </div>
                                                                            <div class="modal-footer">
                                                                                <button type="button" class="btn btn-info waves-effect"
                                                                                        data-dismiss="modal" onclick="save()">保存
                                                                                </button>
                                                                                <button type="button" class="btn btn-default waves-effect"
                                                                                        data-dismiss="modal" >取消
                                                                                </button>
                                                                            </div>
                                                                        </div>
                                                                        <!-- /.modal-content -->
                                                                    </div>
                                                                    <!-- /.modal-dialog -->
                                                                </div>
                                                            </div>
                                                        </aside>
                                                    </table>
                                                    <!--分页插件-->
                                                    <nav>
                                                        <ul class="pagination">
                                                            <li>
                                                                <a href="#" aria-label="Previous" onclick="left()">
                                                                    <span aria-hidden="true">&laquo;</span>
                                                                </a>
                                                            </li>
                                                            <!-- <li class="active"><a href="#">1</a></li>-->
                                                            <!--<li><a href="#">2</a></li>-->
                                                            <!--<li><a href="#">3</a></li>-->
                                                            <li>
                                                                <a href="#" aria-label="Next" onclick="right()">
                                                                    <span aria-hidden="true">&raquo;</span>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </nav>
                                                    <!-- 分页插件结束 -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </aside>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /Row -->

</div>
<!-- /#wrapper -->


<!-- jQuery -->
<script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- wysuhtml5 Plugin JavaScript -->
<script src="vendors/bower_components/wysihtml5x/dist/wysihtml5x.min.js"></script>
<script src="vendors/bower_components/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.all.js"></script>
<!-- Fancy Dropdown JS -->
<script src="dist/js/dropdown-bootstrap-extended.js"></script>
<!-- Bootstrap Wysuhtml5 Init JavaScript -->
<script src="dist/js/bootstrap-wysuhtml5-data.js"></script>
<!-- Slimscroll JavaScript -->
<script src="dist/js/jquery.slimscroll.js"></script>
<!-- Owl JavaScript -->
<script src="vendors/bower_components/owl.carousel/dist/owl.carousel.min.js"></script>
<!-- Switchery JavaScript -->
<script src="vendors/bower_components/switchery/dist/switchery.min.js"></script>
<!-- Init JavaScript -->
<script src="dist/js/init.js"></script>

</body>
<script>
    var prePage=  0; //当前页的前一页
    var nextPage = 0; //当前页的后一页
    var isFirstPage=false; //是否为首页
    var isLastPage=false; //是否为尾也

    //1.页面加载,调用一个分页查询一页数据的方法
    $(function(){
        findByPage(1);  //页面初始化查询第一页数据.
    })

    //2.查询后台的数据,动态展示的方法
    function findByPage(pageNum){
        //每次查询的时候都会生成新的tr  li ,所以方法之前要清空这两项
        $("tbody tr").remove();
        $("li[name='myli']").remove();

        //2.1 发送ajax请求,查询后台的数据
        $.post("/visualization/user/list.do","pageNum="+pageNum+"&pageSize=10", function(data){
            //初始化成员
            prePage = data.data.prePage;
            nextPage = data.data.nextPage;
            isFirstPage = data.data.isFirstPage;
            isLastPage = data.data.isLastPage;

            //2.2 获取到查询到的一页数据list,循环生成  tr td ,把数据嵌套到tr td, 放到tbody
            var list = data.data.list;
            //2.3循环查到的一页用户数据
            for(var i=0; i<list.length; i++){
                var $tr = $("<tr>\n" +
                    "   <th>"+list[i].id+"</th>\n" +
                    "    <th>"+list[i].username+"</th>\n" +
                    "    <th>"+list[i].email+"</th>\n" +
                    "    <th>"+list[i].phone+"</th>\n" +
                    "    <th>"+list[i].createTime+"</th>\n" +
                    "    <th>"+list[i].updateTime+"</th>\n" +
                    "    <th><a href='#myUpdateModal' class='text-inverse pr-10' title='Edit' data-toggle='tooltip'><i class=\"zmdi zmdi-edit txt-warning\"></i></a>" +
                    "<a href='javascript:void(0)' class='text-inverse' title='Delete' data-toggle='tooltip' onclick='deleteById("+list[i].id+")'><i class='zmdi zmdi-delete txt-danger'></i></a></th>\n" +
                    "    </tr>");
                $("tbody").append($tr);
            }

            //3.动态生成页码
            var totalPage =  data.data.pages;
            for(var i = 0 ; i < totalPage ; i++){
                var $li = $("<li name='myli'><a href='#' onclick='findByPage("+(i+1)+")'>"+(i+1)+"</a></li>");
                //所以要把li标签添加到页面
                $("li:last").before($li);
                //判断当前页是那一页
                if(data.data.pageNum == (i+1)){
                    $li.prop("class","active");
                }
            }

        } ,"json")
    }

    //点击向左的方法
    function left(){
        //1.判断当前页是否为首页,如果是首页,return停止方法
        if(isFirstPage){
            return;
        }
        //2.如果不是首页,调用findByPage(前一页)
        findByPage(prePage)

    }

    //点击向右的方法
    function right(){
        //1.判断当前页是否为尾页,如果是首页,return停止方法
        if(isLastPage){
            return;
        }

        //2.如果不是尾页,调用findByPage(后一页)
        findByPage(nextPage)
    }

    function save(){
        //获取数据
        var name = $("#addName").val();
        var pwd = $("#addPwd").val();
        var pwd2 = $("#addPwd2").val();
        var email = $("#addEmail").val();
        var phone = $("#addPhone").val();

        if(pwd != pwd2){
            $("#errMsg").html("两次密码不一致");
        }

        $.post("/visualization/user/add.do",{"username":name,"password":pwd,"email":email,"phone":phone},function(data){
            if(data.status == 1){
                alert("添加成功");
                window.location.reload();
            }else{
                alert("添加失败 "+data.msg)
            }
        })
    }
    //删除用户
    function deleteById(id){
        //1.询问用户是否确认删除
        var flag =  window.confirm("您是否确认删除?");
        if(!flag){
            return;
        }
        //2.发送ajax请求删除后台数据,参数id
        $.post("/visualization/user/deleteUser.do","id="+id,function(data){
            if(data.code == 1){
                location.reload();
            }
        },"json")
    }

</script>
</html>
